لماذا تعتقد HTML أن "chucknorris" لون؟

إنها ملكية من أيام Netscape:
يتم التعامل مع الأرقام المفقودة على أنها 0 [...]. يتم تفسير الرقم غير الصحيح على أنه 0. على سبيل المثال ، القيم # F0F0F0 و F0F0F0 و F0F0F و #FxFxFx و FxFxFx كلها متشابهة.
إنه مأخوذ من منشور المدونة ، هناك القليل من التشدق حول تحليل الألوان في Microsoft Internet Explorer والذي يغطيها بتفصيل كبير ، بما في ذلك أطوال متفاوتة لقيم الألوان ، إلخ.
إذا طبقنا القواعد بدورنا من منشور المدونة ، فسنحصل على ما يلي:
استبدل جميع الأحرف السداسية العشرية غير الصالحة بأرقام 0:
يصبح chucknorris c00c0000000
اترك العدد الإجمالي التالي للأحرف القابلة للقسمة على 3 (11 ← 12):
c00c 0000 0000
انقسم إلى ثلاث مجموعات متساوية ، حيث يمثل كل مكون مكون اللون المقابل للون RGB:
RGB (c00c ، 0000 ، 0000)
اقتطع كل وسيط من اليمين إلى حرفين.
والذي يعطي في النهاية النتيجة التالية:
RGB (c0 ، 00 ، 00) = # C00000 أو RGB (192 ، 0 ، 0)
إليك مثال يوضح خاصية bgcolor أثناء العمل ، لإنتاج حامل اللون "المذهل" هذا:
<جدول>

 تشاك نوريس 
 السيد T 
 ninjaturtle 


 مريض 
 حماقة 
 عشب 


يجيب هذا أيضًا على الجزء الآخر من السؤال: لماذا ينتج bgcolor = "chucknorr" لونًا أصفر؟ حسنًا ، إذا طبقنا القواعد ، فإن السلسلة هي:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192 ، 192 ، 0)]
الذي يعطي لون الذهب الأصفر الفاتح. نظرًا لأن السلسلة تبدأ من 9 أحرف ، فإننا نحتفظ بالحرف "C" الثاني هذه المرة ، ومن ثم ينتهي به الأمر في قيمة اللون النهائية.
لقد واجهت هذا في الأصل عندما أشار أحدهم إلى أنه يمكنك عمل اللون = "حماقة" ، حسنًا ، يظهر اللون البني.
|
يؤسفني عدم الموافقة ، ولكن وفقًا لقواعد تحليل قيمة اللون القديمة التي نشرهاYuhong Bao ، فإن chucknorris لا يساوي # CC0000 ، بل هو # C00000 ، وهو لون أحمر مشابه جدًا ولكنه مختلف قليلاً. لقد استخدمت وظيفة Firefox ColorZilla الإضافية للتحقق من ذلك.
تنص القواعد على:
اجعل طول السلسلة من مضاعفات 3 بإضافة 0s: chucknorris0
افصل الخيط إلى 3 أوتار متساوية الطول: chuc knor ris0
اقتطع كل سلسلة إلى حرفين: ch kn ri
احتفظ بالقيم السداسية ، وأضف صفرًا عند الضرورة: C0 00 00
تمكنت من استخدام هذه القواعد لتفسير السلاسل التالية بشكل صحيح:
تعويذات جالبة للحظ
حظ
LuckBeALady
LuckBeALadyTonight
جانجنام ستايل
تحديث: المجيبون الأصليون الذين قالوا إن اللون كان # CC0000 قاموا منذ ذلك الحين بتحرير إجاباتهم لتشمل التصحيح.
|
ستتجاهل معظم المتصفحات ببساطة أي قيم غير سداسية عشرية في سلسلة الألوان الخاصة بك ، مع استبدال الأرقام غير السداسية بالأصفار.
يترجم ChuCknorris إلى c00c0000000. في هذه المرحلة ، سيقوم المتصفح بتقسيم السلسلة إلى ثلاثة أقسام متساوية ، مما يشير إلى قيم الأحمر والأخضر والأزرق: c00c 0000 0000. سيتم تجاهل البتات الإضافية في كل قسم ، مما يجعل النتيجة النهائية # c00000 وهي لون ضارب إلى الحمرة.
لاحظ أن هذا لا ينطبق على تحليل ألوان CSS ، الذي يتبع معيار CSS.
  أحمر  

  كما ورد أعلاه  

  أسود  
|
السبب هو أن المتصفح لا يستطيع فهمه ومحاولة ترجمته بطريقة ما إلى ما يمكنه فهمه وفي هذه الحالة إلى قيمة سداسية عشرية! ...
يبدأ chucknorris بحرف c وهو حرف معروف بالنظام الست عشري ، كما أنه يحول جميع الأحرف غير المعروفة إلى 0!
لذا يصبح chucknorris بالتنسيق السداسي عشري: c00c00000000 ، تصبح جميع الأحرف الأخرى 0 ويبقى c حيث هم ...
الآن يتم تقسيمهم على 3 لـ RGB (أحمر ، أخضر ، أزرق) ... R: c00c ، G: 0000 ، B: 0000 ...
لكننا نعلم أن النظام الست عشري الصحيح لـ RGB هو حرفان فقط ، يعني R: c0 ، G: 00 ، B: 00
فالنتيجة الحقيقية هي:
bgcolor = "# c00000" ؛
لقد أضفت أيضًا الخطوات في الصورة كمرجع سريع لك:
|
يحاول المتصفح تحويل chucknorris إلى رمز لوني سداسي عشري ، لأنه ليس قيمة صالحة.
في chucknorris ، كل شيء ما عدا c ليس قيمة سداسية عشرية صالحة.
لذلك يتم تحويلها إلى c00c00000000.
الذي يصبح # c00000 ، ظل أحمر.
يبدو أن هذه مشكلة بشكل أساسي مع Internet Explorer و Opera (12) حيث يتجاهل كل من Chrome (31) و Firefox (26) هذا الأمر.
ملاحظة. الأرقام الموجودة بين قوسين هي إصدارات المتصفح التي اختبرت عليها.
في ملاحظة أخف
لا يتوافق Chuck Norris مع معايير الويب. تتوافق معايير الويب
له. # BADA55
|
تحتوي مواصفات WHATWG HTML على الخوارزمية الدقيقة لتحليل اللون القديمالقيمة:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
الكود Netscape Classic المستخدم لتحليل سلاسل الألوان مفتوح المصدر:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
على سبيل المثال ، لاحظ أن كل حرف يتم تحليله كرقم سداسي عشري ثم يتم إزاحته إلى عدد صحيح 32 بت دون التحقق من الفائض. ثمانية أرقام سداسية عشرية فقط تتلاءم مع عدد صحيح 32 بت ، وهذا هو سبب اعتبار الأحرف الثمانية الأخيرة فقط. بعد تحليل الأرقام السداسية إلى أعداد صحيحة 32 بت ، يتم اقتطاعها بعد ذلك إلى أعداد صحيحة 8 بت بتقسيمها على 16 حتى تتلاءم مع 8 بت ، وهذا هو سبب تجاهل الأصفار البادئة.
تحديث: هذا الرمز لا يتطابق تمامًا مع ما تم تحديده في المواصفات ، ولكن الاختلاف الوحيد هو بضعة أسطر من التعليمات البرمجية. أعتقد أن هذه السطور تمت إضافتها (في Netscape 4):
إذا (bytes_per_val> 4)
{
bytes_per_val = 4 ،
}
|
إجابة:
سيحاول المتصفح تحويل chucknorris إلى قيمة سداسية عشرية.
نظرًا لأن c هو الحرف السداسي العشري الوحيد الصالح في chucknorris ، تتحول القيمة إلى: c00c00000000 (0 لجميع القيم غير الصالحة).
ثم يقسم المتصفح النتيجة إلى 3 مجموعات: الأحمر = c00c ، والأخضر = 0000 ، والأزرق = 0000.
نظرًا لأن القيم السداسية الصالحة لخلفيات html تحتوي على رقمين فقط لكل نوع من أنواع الألوان (r ، g ، b) ، يتم اقتطاع آخر رقمين من كل مجموعة ، مما يترك قيمة rgb تبلغ c00000 وهو لون منغم إلى الأحمر.
|
يبدأ chucknorris بـ c ، ويقرأه المتصفح في شكل قيمة سداسية عشرية.
لأن A و B و C و D و E و F هي أحرف بالنظام الست عشري.
يحول المتصفح chucknorris إلى قيمة سداسية عشرية ، C00C00000000.
ثم يتم تحويل القيمة السداسية العشرية C00C00000000 إلى تنسيق RGB (مقسومة على 3):
C00C00000000 ⇒ R: C00C ، G: 0000 ، B: 0000
يحتاج المتصفح إلى رقمين فقط للإشارة إلى اللون:
R: C00C ، G: 0000 ، B: 0000 ⇒ R: C0 ، G: 00 ، B: 00 ⇒ C00000
أخيرًا ، اعرض bgcolor = C00000 في متصفح الويب.
هذا مثال يوضح ذلك:
<جدول>

 تشكنوريس 
 c00c00000000 
 c00000 


|
تتضمن قواعد تحليل الألوان في السمات القديمة خطوات إضافية غير تلك المذكورة في الإجابات الحالية. يوصف المكون المقتطع إلى مكون من رقمين على النحو التالي:
تجاهل جميع الأحرف باستثناء آخر 8
تجاهل الأصفار البادئة واحدًا تلو الآخر طالما أن جميع المكونات بها صفر بادئ
تجاهل جميع الأحرف باستثناء أول 2
بعض الأمثلة:
oooFoooFoooF
000F 000F 000F <- استبدال ، وسادة ، قطعة
0F 0F 0F <- تم اقتطاع الأصفار البادئة
0F 0F 0F <- مقطوع إلى حرفين من اليمين
oooFooFFoFFF
000F 00FF 0FFF <- استبدال ، وسادة وقطع
00F 0FF FFF <- تم اقتطاع الأصفار البادئة
00 0F FF <- مقطوع إلى حرفين من اليمين
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- استبدال ، وسادة وقطع
BC000000 BC000000 BC000000 <- مقطوع إلى 8 أحرف من اليسار
BC BC BC <- تم اقتطاعه إلى حرفين من اليمين
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- استبدال ، وسادة وقطع
0C000000 0C000000 0C000000 <- مقطوع إلى 8 أحرف من اليسار
C000000 C000000 C000000 <- تم اقتطاع الأصفار البادئة
C0 C0 C0 <- مقطوع إلى حرفين من اليمين
يوجد أدناه تنفيذ جزئي للخوارزمية. لا يعالج الأخطاء أو الحالات التي يُدخل فيها المستخدم لونًا صالحًا.
دالة parseColor (إدخال) {
// todo: إرجاع الخطأ إذا كان الإدخال ""
المدخلات = input.trim () ؛
// todo: إرجاع الخطأ إذا كان الإدخال "شفاف"
// todo: إرجاع المقابلة #rrggbb إذا كان الإدخال لونًا مسمى
// todo: return #rrggbb إذا تطابق الإدخال مع #rgb
// todo: استبدل نقاط كود unicode الأكبر من U + FFFF بـ 00
إذا (input.length> 128) {
المدخلات = input.slice (0 ، 128) ؛
}
إذا (input.charAt (0) === "#") {
المدخلات = input.slice (1) ؛
}
الإدخال = input.replace (/ [^ 0-9A-Fa-f] / g، "0") ؛
while (input.length === 0 || input.length٪ 3> 0) {
الإدخال + = "0" ؛
}
var r = input.slice (0، input.length / 3) ؛
var g = input.slice (input.length / 3 ، input.length * 2/3) ؛
var b = input.slice (input.length * 2/3) ؛
إذا (طول المدة> 8) {
r = r.slice (-8) ؛
g = g.slice (-8) ؛
ب = ب شريحة (-8) ؛
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1) ؛
g = g.slice (1) ؛
ب = ب شريحة (1) ؛
}
إذا (طول المدة> 2) {
ص = r.slice (0 ، 2) ؛
ز = ز شريحة (0 ، 2) ؛
ب = ب شريحة (0 ، 2) ؛
}
إرجاع "#" + r.padStart (2، "0") + g.padStart (2، "0") + b.padStart (2، "0") ؛
}
$ (الوظيفة () {
$ ("# input"). on ("change"، function () {
var input = $ (this) .val () ؛
var color = parseColor (المدخلات) ؛
var $ cells = $ ("# result tbody td")؛
$ cell.eq (0) .attr ("bgcolor"، إدخال)؛
$ cell.eq (1) .attr ("bgcolor" ، اللون) ؛
فارالقيمة:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
الكود Netscape Classic المستخدم لتحليل سلاسل الألوان مفتوح المصدر:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
على سبيل المثال ، لاحظ أن كل حرف يتم تحليله كرقم سداسي عشري ثم يتم إزاحته إلى عدد صحيح 32 بت دون التحقق من الفائض. ثمانية أرقام سداسية عشرية فقط تتلاءم مع عدد صحيح 32 بت ، وهذا هو سبب اعتبار الأحرف الثمانية الأخيرة فقط. بعد تحليل الأرقام السداسية إلى أعداد صحيحة 32 بت ، يتم اقتطاعها بعد ذلك إلى أعداد صحيحة 8 بت بتقسيمها على 16 حتى تتلاءم مع 8 بت ، وهذا هو سبب تجاهل الأصفار البادئة.
تحديث: هذا الرمز لا يتطابق تمامًا مع ما تم تحديده في المواصفات ، ولكن الاختلاف الوحيد هو بضعة أسطر من التعليمات البرمجية. أعتقد أن هذه السطور تمت إضافتها (في Netscape 4):
إذا (bytes_per_val> 4)
{
bytes_per_val = 4 ،
}
|
إجابة:
سيحاول المتصفح تحويل chucknorris إلى قيمة سداسية عشرية.
نظرًا لأن c هو الحرف السداسي العشري الوحيد الصالح في chucknorris ، تتحول القيمة إلى: c00c00000000 (0 لجميع القيم غير الصالحة).
ثم يقسم المتصفح النتيجة إلى 3 مجموعات: الأحمر = c00c ، والأخضر = 0000 ، والأزرق = 0000.
نظرًا لأن القيم السداسية الصالحة لخلفيات html تحتوي على رقمين فقط لكل نوع من أنواع الألوان (r ، g ، b) ، يتم اقتطاع آخر رقمين من كل مجموعة ، مما يترك قيمة rgb تبلغ c00000 وهو لون منغم إلى الأحمر.
|
يبدأ chucknorris بـ c ، ويقرأه المتصفح في شكل قيمة سداسية عشرية.
لأن A و B و C و D و E و F هي أحرف بالنظام الست عشري.
يحول المتصفح chucknorris إلى قيمة سداسية عشرية ، C00C00000000.
ثم يتم تحويل القيمة السداسية العشرية C00C00000000 إلى تنسيق RGB (مقسومة على 3):
C00C00000000 ⇒ R: C00C ، G: 0000 ، B: 0000
يحتاج المتصفح إلى رقمين فقط للإشارة إلى اللون:
R: C00C ، G: 0000 ، B: 0000 ⇒ R: C0 ، G: 00 ، B: 00 ⇒ C00000
أخيرًا ، اعرض bgcolor = C00000 في متصفح الويب.
هذا مثال يوضح ذلك:
<جدول>

 تشكنوريس 
 c00c00000000 
 c00000 


|
تتضمن قواعد تحليل الألوان في السمات القديمة خطوات إضافية غير تلك المذكورة في الإجابات الحالية. يوصف المكون المقتطع إلى مكون من رقمين على النحو التالي:
تجاهل جميع الأحرف باستثناء آخر 8
تجاهل الأصفار البادئة واحدًا تلو الآخر طالما أن جميع المكونات بها صفر بادئ
تجاهل جميع الأحرف باستثناء أول 2
بعض الأمثلة:
oooFoooFoooF
000F 000F 000F <- استبدال ، وسادة ، قطعة
0F 0F 0F <- تم اقتطاع الأصفار البادئة
0F 0F 0F <- مقطوع إلى حرفين من اليمين
oooFooFFoFFF
000F 00FF 0FFF <- استبدال ، وسادة وقطع
00F 0FF FFF <- تم اقتطاع الأصفار البادئة
00 0F FF <- مقطوع إلى حرفين من اليمين
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- استبدال ، وسادة وقطع
BC000000 BC000000 BC000000 <- مقطوع إلى 8 أحرف من اليسار
BC BC BC <- تم اقتطاعه إلى حرفين من اليمين
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- استبدال ، وسادة وقطع
0C000000 0C000000 0C000000 <- مقطوع إلى 8 أحرف من اليسار
C000000 C000000 C000000 <- تم اقتطاع الأصفار البادئة
C0 C0 C0 <- مقطوع إلى حرفين من اليمين
يوجد أدناه تنفيذ جزئي للخوارزمية. لا يعالج الأخطاء أو الحالات التي يُدخل فيها المستخدم لونًا صالحًا.
دالة parseColor (إدخال) {
// todo: إرجاع الخطأ إذا كان الإدخال ""
المدخلات = input.trim () ؛
// todo: إرجاع الخطأ إذا كان الإدخال "شفاف"
// todo: إرجاع المقابلة #rrggbb إذا كان الإدخال لونًا مسمى
// todo: return #rrggbb إذا تطابق الإدخال مع #rgb
// todo: استبدل نقاط كود unicode الأكبر من U + FFFF بـ 00
إذا (input.length> 128) {
المدخلات = input.slice (0 ، 128) ؛
}
إذا (input.charAt (0) === "#") {
المدخلات = input.slice (1) ؛
}
الإدخال = input.replace (/ [^ 0-9A-Fa-f] / g، "0") ؛
while (input.length === 0 || input.length٪ 3> 0) {
الإدخال + = "0" ؛
}
var r = input.slice (0، input.length / 3) ؛
var g = input.slice (input.length / 3 ، input.length * 2/3) ؛
var b = input.slice (input.length * 2/3) ؛
إذا (طول المدة> 8) {
r = r.slice (-8) ؛
g = g.slice (-8) ؛
ب = ب شريحة (-8) ؛
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r.slice (1) ؛
g = g.slice (1) ؛
ب = ب شريحة (1) ؛
}
إذا (طول المدة> 2) {
ص = r.slice (0 ، 2) ؛
ز = ز شريحة (0 ، 2) ؛
ب = ب شريحة (0 ، 2) ؛
}
إرجاع "#" + r.padStart (2، "0") + g.padStart (2، "0") + b.padStart (2، "0") ؛
}
$ (الوظيفة () {
$ ("# input"). on ("change"، function () {
var input = $ (this) .val () ؛
var color = parseColor (المدخلات) ؛
var $ cells = $ ("# result tbody td")؛
$ cell.eq (0) .attr ("bgcolor"، إدخال)؛
$ cell.eq (1) .attr ("bgcolor" ، اللون) ؛
فار